<template>
  <div>
    <div class="range-container">
      <el-card class="treeList">
        <div>
          <el-tree
            ref="tree"
            :data="outfitTree"
            :props="defaultProps"
            icon-class="el-icon-circle-plus"
            :expand-on-click-node="false"
            highlight-current
            node-key="id"
            :current-node-key="currentNodeKey"
            :default-expanded-keys="['1024984540818568481']"
            @node-click="changeTree"
          />
        </div>
      </el-card>
      <div>
        <el-card class="box-card" style="width: 1020px">
          <div slot="header" class="clearfix">
            <span>作业范围</span>

            <el-button
              v-if="changShow"
              style="float: right; background-color: #e15536; color: #fff"
              @click="changShow = false"
            >编辑</el-button>

            <div v-else style="float: right;">
              <el-button
                style=" background-color: #e15536; color: #fff"
              >提交</el-button>
              <el-button
                @click="cancelEdit"
              >取消</el-button>
            </div>
          </div>
          <div style="margin-bottom: 20px;">
            <div style="margin-bottom: 20px;">
              地区关键词：<el-input
                style="width: 230px;margin-bottom: 20px;"
                placeholder="请输入地区关键词"
              />
              <div>
                <div v-if="!drawShow">
                  <el-button
                    v-if="!changShow"
                    style=" background-color: #e15536; color: #fff"
                    @click="drawShow=true"
                  >
                    开始绘制
                  </el-button>
                </div>
                <div v-if="drawShow">
                  <el-button
                    style=" background-color: #e15536; color: #fff"
                    @click="cancelDraw"
                  >
                    完成绘制
                  </el-button>
                  <el-button>
                    删除围栏
                  </el-button>
                </div>
              </div>
            </div>
            <div />
            <div id="container" />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { outfitTree, sphereBusiness } from '@/api/basic'
export default {
  name: '',
  data() {
    return {
      // 树状图
      outfitTree: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      currentNodeKey: '1024985257948084801',
      outfitId: '' || '1024985257948084801',

      // 点击显示按钮
      changShow: true,
      drawShow: false,

      // 地图
      mapData: {
        longitude: '' || 123.162626,
        latitude: '' || 41.2669,
        type: '' || 1,
        id: '' || '1024985257948084801'
      }
    }
  },
  mounted() {
    // DOM初始化完成进行地图初始化
    this.initMap()
  },
  created() {
    this.outfitTreeList()
    this.sphereBusinessList()
  },
  methods: {
    async outfitTreeList() {
      const res = await outfitTree()
      const treeDate = JSON.parse(res.data.data)
      // 1024706903290237921
      treeDate[6].parentId = '1024706903290237921'

      const arr = treeDate[6]
      treeDate.splice(6, 1)
      treeDate[5].children[0].children.push(arr)
      this.outfitTree = treeDate
    },
    // 点击树状图获得id
    changeTree(i) {
      this.mapData.longitude = i.longitude
      this.mapData.latitude = i.latitude
      console.log(this.mapData.longitude)
      this.initMap()
      // 将获得的id代入
      this.outfitId = i.id
      console.log(i)
    },
    // 获取业务范围
    async sphereBusinessList() {
      const res = await sphereBusiness(this.mapData.id, this.mapData.type)
      console.log(res.data.data.polygon)
    },
    // 地图
    initMap() {
      AMapLoader.load({
        key: 'e0199c9ae5c7cb77cbc481f08c29293b', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map('container', { // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 10, // 初始化地图级别
          center: [this.mapData.longitude, this.mapData.latitude] // 初始化地图中心点位置
        })
      }).catch(e => {
        console.log(e)
      })
    },
    cancelEdit() {
      this.changShow = true
    },
    cancelDraw() {
      this.drawShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.range-container {
  width: 1300px;
  height: 100%;
  padding: 23px 20px 20px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}

.treeList {
  width: 250px;
  padding-left: 10px;
  margin-right: 20px;
}
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>
